<template>
	<view>
		<!-- 分类选择 -->
		<view class="category-tabs">
			<view :class="{'active': currentCategory === 'history'}" @click="currentCategory = 'history'">自然景观类</view>
			<view :class="{'active': currentCategory === 'food'}" @click="currentCategory = 'food'">历史文化类</view>
			<view :class="{'active': currentCategory === 'food1'}" @click="currentCategory = 'food1'">宁夏美食</view>

		</view>

		<!-- 内容展示 -->
		<view class="category-content" v-if="currentCategory">
			<view class="item" v-for="(item, index) in currentCategoryData" :key="index"
				@tap="toDetails(item.id,item.name)">
				<image :src="item.pic" mode="aspectFill" class="item-image"></image>
				<view class="item-info">
					<view class="item-title">{{ item.name }}</view>
					<!-- 文字内容可以根据实际情况添加 -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	// import {
	// 	onLoad
	// } from '@dcloudio/uni-app'

	import {
		CONFIG
	} from "../../utils/config"

	import {
		userStore
	} from '../../store/userStore';

	let store = userStore()

	const colors = ref(["#fff", "#4e7ca1"]);

	const historys = ref([{
			name: '沙湖生态旅游区',
			pic: '../../static/yw/沙湖生态旅游区.jpeg'
		},
		{
			name: '沙坡头旅游景区',
			pic: '../../static/yw/沙坡头旅游景区.jpeg'
		},
		{
			name: '火石寨国家地质公园',
			pic: '../../static/yw/火石寨国家地质公园.jpeg'
		},
		{
			name: '六盘山国家森林公园',
			pic: '../../static/yw/六盘山国家森林公园.jpeg'
		}
	]);

	const foods = ref([{
			// id: '1',
			name: '西夏王陵',
			pic: '../../static/yw/西夏王陵.jpeg'
		},
		{
			name: '镇北堡西部影视城',
			pic: '../../static/yw/镇北堡西部影视城.jpeg'
		},
		{
			name: '贺兰山岩画',
			pic: '../../static/yw/贺兰山岩画.jpeg'
		},
		{
			name: '须弥山石窟',
			pic: '../../static/yw/须弥山石窟.jpeg'
		},
	]);


	const food1s = ref([{
			// id: '1',
			name: '手抓羊肉',
			pic: '../../static/yw/手抓羊肉.jpeg'
		},
		{
			name: '辣糊糊',
			pic: '../../static/yw/辣糊糊.jpeg'
		},
		{
			name: '馓子',
			pic: '../../static/yw/馓子.jpeg'
		},
		{
			name: '中卫素杂烩',
			pic: '../../static/yw/中卫素杂烩.jpeg'
		},
	]);
	const currentCategory = ref('history'); // 默认显示名胜古迹

	const currentCategoryData = computed(() => {
		switch (currentCategory.value) {
			case 'history':
				return historys.value;
			case 'food':
				return foods.value;
			case 'food1':
				return food1s.value;
			default:
				return historys.value;
		}
	});

	function toDetails(id, name) {
		console.log(id + name)
		uni.navigateTo({
			url: '/pages/playDetails/playDetails?id=' + id
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
	}

	.lunbo {
		width: 100%;
	}

	.category-tabs {
		display: flex;
		justify-content: space-around;
		padding: 1px;
		background-color: #f2f2f2;
		width: 100%;
	}

	.category-tabs view {
		flex: 1;
		text-align: center;
		padding: 10px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.category-tabs view.active {
		background-color: #4e7ca1;
		color: #fff;
	}

	.category-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 10px;
	}

	.item {
		width: 90%;
		/* 内容宽度 */
		margin-bottom: 10px;
		text-align: center;
	}

	.item-image {
		width: 100%;
		height: 300px;
		/* 根据需要调整 */
		object-fit: cover;
		border-radius: 8px;
		/* 圆角边框 */
		margin: 0 auto;
		/* 居中显示 */
	}

	.item-info {
		width: 100%;
	}

	.item-title {
		font-size: 18px;
		font-weight: bold;
		padding: 10px;
	}
</style>